<template>
  <div class="explore" style="margin-left: 30px">
    <div class="daohanglan">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="去发现" name="first">
          <el-form :model="formData" ref="vForm" :rules="rules" label-position="top" label-width="80px" size="large"
                   @submit.prevent>
            <el-row>
              <el-col :span="11" class="grid-cell">
                <el-form-item label="好物名称" prop="input111083" class="required label-right-align">
                  <el-input v-model="formData.input111083" type="text" placeholder="请填写好物名称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :push="1" class="grid-cell">
                <el-form-item label="探索者邮箱" prop="input19608" class="required label-right-align">
                  <el-input v-model="formData.input19608" type="text" placeholder="xxx@qq.com" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11" class="grid-cell">
                <el-form-item label="好物品类" prop="select27503" class="required label-right-align">
                  <el-select v-model="formData.select27503" class="full-width-input" clearable>
                    <el-option v-for="(item, index) in select27503Options" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11" :push="1" class="grid-cell">
                <el-form-item label="探索者电话" prop="input40851" class="required label-right-align">
                  <el-input v-model="formData.input40851" type="text" placeholder="请输入联系号码" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11" class="grid-cell">
                <el-form-item label="预测等级" prop="select63714" class="required label-right-align">
                  <el-select v-model="formData.select63714" class="full-width-input" clearable>
                    <el-option v-for="(item, index) in select63714Options" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11" class="grid-cell">
                <el-form-item label="上传图片" prop="pictureupload63439" class="required label-right-align">
                  <el-upload :file-list="pictureupload63439FileList" :headers="pictureupload63439UploadHeaders"
                             :data="pictureupload63439UploadData" list-type="picture-card" show-file-list :limit="3">
                    <template #default><i class="el-icon-plus"></i></template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="11" :push="1" class="grid-cell">
                <el-form-item label="介绍文件" prop="fileupload117141" class="required label-right-align">
                  <el-upload :file-list="fileupload117141FileList" :headers="fileupload117141UploadHeaders"
                             :data="fileupload117141UploadData" list-type="picture-card" show-file-list :limit="3">
                    <template #default><i class="el-icon-plus"></i></template>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="static-content-item">
              <el-divider direction="horizontal"></el-divider>
            </div>
            <el-row>
              <el-col :span="2" :push="8" class="grid-cell">
                <div class="static-content-item">
                  <el-button type="success">提交</el-button>
                </div>
              </el-col>
              <el-col :span="2" :push="12" class="grid-cell">
                <div class="static-content-item">
                  <el-button type="info">返回</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="待审核" name="second">
          <div>
            <el-table :data="auditList" style="width: 100%">
              <el-table-column prop="productName" label="好物名称"></el-table-column>
              <el-table-column prop="category" label="好物品类"></el-table-column>
              <el-table-column prop="predictionLevel" label="预测等级"></el-table-column>
              <el-table-column prop="explorerEmail" label="探索者邮箱"></el-table-column>
              <el-table-column prop="explorerPhone" label="探索者电话"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="text" @click="handleApprove(scope.row)">批准</el-button>
                  <el-button type="text" @click="handleReject(scope.row)">拒绝</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="提交历史" name="third">
          <div>
            <el-table :data="submissionHistory" style="width: 100%">
              <el-table-column prop="explorerName" label="探索者名字"></el-table-column>
              <el-table-column prop="productName" label="好物名称"></el-table-column>
              <el-table-column prop="explorerEmail" label="探索者邮箱"></el-table-column>
              <el-table-column prop="explorerPhone" label="探索者电话"></el-table-column>
              <el-table-column prop="submissionTime" label="提交时间"></el-table-column>
              <el-table-column label="审核状态">
                <template #default="scope">
                  <el-tag :type="getStatusTagType(scope.row.reviewStatus)"
                  >{{ scope.row.reviewStatus }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="好物仓库" name="fourth">
          <div>
            <el-table :data="warehouseList" style="width: 100%">
              <el-table-column label="好物图片">
                <template #default="scope">
                  <img :src="scope.row.pictureUrl" alt="好物图片" style="width: 50px; height: 50px;">
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="好物名称"></el-table-column>
              <el-table-column prop="productLevel" label="好物等级"></el-table-column>
              <el-table-column prop="originPlace" label="产地"></el-table-column>
              <el-table-column prop="collectionDate" label="收录日期"></el-table-column>
              <el-table-column prop="stockQuantity" label="库存量"></el-table-column>
              <el-table-column prop="productCategory" label="好物类别"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { defineComponent, toRefs, reactive, getCurrentInstance } from 'vue';

export default defineComponent({
  components: {},
  props: {},
  setup() {
    const state = reactive({
      activeName: 'first',
      formData: {
        input111083: "",
        input19608: "",
        select27503: "",
        input40851: "",
        select63714: "",
        pictureupload63439: null,
        fileupload117141: null,
      },
      rules: {
        input111083: [{
          required: true,
          message: '字段值不可为空',
        }],
        input19608: [{
          required: true,
          message: '字段值不可为空',
        }, {
          pattern: /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/,
          trigger: ['blur', 'change'],
          message: '请输入正确的邮箱格式'
        }],
        select27503: [{
          required: true,
          message: '字段值不可为空',
        }],
        input40851: [{
          required: true,
          message: '字段值不可为空',
        }],
        select63714: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload63439: [{
          required: true,
          message: '字段值不可为空',
        }],
        fileupload117141: [{
          required: true,
          message: '字段值不可为空',
        }],
      },
      select27503Options: [{
        "value": "1",
        "label": "农产品"
      }, {
        "value": "2",
        "label": "水产品"
      }, {
        "value": "3",
        "label": "加工食品"
      }, {
        "value": "4",
        "label": "工艺品"
      }, {
        "value": "5",
        "label": "茶艺类"
      }, {
        "value": "6",
        "label": "其他"
      }],
      select63714Options: [{
        "value": "1",
        "label": "普通级"
      }, {
        "value": "2",
        "label": "优质级"
      }, {
        "value": "3",
        "label": "精选级"
      }, {
        "value": "4",
        "label": "特等级"
      }, {
        "value": "5",
        "label": "有机"
      }, {
        "value": "6",
        "label": "绿色"
      }, {
        "value": "7",
        "label": "地理标志保护产品"
      }, {
        "value": "8",
        "label": "传统工艺"
      }],
      pictureupload63439FileList: [],
      pictureupload63439UploadHeaders: {},
      pictureupload63439UploadData: {},
      fileupload117141FileList: [],
      fileupload117141UploadHeaders: {},
      fileupload117141UploadData: {},
    });

    const instance = getCurrentInstance();
    const submitForm = () => {
      instance.ctx.$refs['vForm'].validate(valid => {
        if (!valid) return;
        //TODO: 提交表单
      });
    };
    const resetForm = () => {
      instance.ctx.$refs['vForm'].resetFields();
    };

    // 待审核数据列表
    const auditList = reactive([
      {
        productName: '智能手环',
        category: '电子产品',
        predictionLevel: 'A级',
        explorerEmail: 'explorer1@example.com',
        explorerPhone: '12345678901',
        reviewStatus: '待审核'
      },
      {
        productName: '手工编织毛毯',
        category: '家居用品',
        predictionLevel: 'B级',
        explorerEmail: 'explorer2@example.com',
        explorerPhone: '12345678902',
        reviewStatus: '待审核'
      },
      {
        productName: '有机绿茶',
        category: '食品',
        predictionLevel: 'C级',
        explorerEmail: 'explorer3@example.com',
        explorerPhone: '12345678903',
        reviewStatus: '待审核'
      }
    ]);

    // 提交历史数据列表
    const submissionHistory = reactive([
      {
        explorerName: '张三',
        productName: '智能手环',
        explorerEmail: 'zhangsan@example.com',
        explorerPhone: '12345678901',
        submissionTime: '2024-12-01 10:30:00',
        reviewStatus: '已通过'
      },
      {
        explorerName: '李四',
        productName: '手工编织毛毯',
        explorerEmail: 'lisi@example.com',
        explorerPhone: '12345678902',
        submissionTime: '2024-12-03 15:20:00',
        reviewStatus: '未通过'
      },
      {
        explorerName: '王五',
        productName: '有机绿茶',
        explorerEmail: 'wangwu@example.com',
        explorerPhone: '12345678903',
        submissionTime: '2024-12-05 09:10:00',
        reviewStatus: '已通过'
      },
      {
        explorerName: '赵六',
        productName: '特色摆件',
        explorerEmail: 'zhaoliu@example.com',
        explorerPhone: '12345678904',
        submissionTime: '2024-12-06 14:15:00',
        reviewStatus: '待审核'
      }
    ]);

    // 根据审核状态返回对应的el-tag类型
    const getStatusTagType = (status) => {
      switch (status) {
        case '已通过':
          return'success';
        case '未通过':
          return 'danger';
        case '待审核':
          return 'info';
        default:
          return 'info';
      }
    };




    const warehouseList = reactive([
      {
        pictureUrl: 'src/assets/image/1.jpg',
        productName: '智能手环',
        productLevel: '优质级',
        originPlace: '深圳',
        collectionDate: '2024-10-01',
        stockQuantity: 100,
        productCategory: '电子产品'
      },
      {
        pictureUrl: 'src/assets/image/1.jpg',
        productName: '手工编织毛毯',
        productLevel: '普通级',
        originPlace: '成都',
        collectionDate: '2024-11-15',
        stockQuantity: 50,
        productCategory: '家居用品'
      },
      {
        pictureUrl: 'src/assets/image/login.png',
        productName: '有机绿茶',
        productLevel: '精选级',
        originPlace: '杭州',
        collectionDate: '2024-09-20',
        stockQuantity: 80,
        productCategory: '食品'
      },
      {
        pictureUrl: 'src/assets/image/tx.png',
        productName: '精美木雕摆件',
        productLevel: '特等级',
        originPlace: '东阳',
        collectionDate: '2024-08-10',
        stockQuantity: 30,
        productCategory: '工艺品'
      },
      {
        pictureUrl: 'src/assets/image/tx.png',
        productName: '五常大米',
        productLevel: '优质级',
        originPlace: '黑龙江五常',
        collectionDate: '2024-07-20',
        stockQuantity: 200,
        productCategory: '农产品'
      },
      {
        pictureUrl: 'src/assets/image/1.jpg',
        productName: '深海鱼油胶囊',
        productLevel: '精选级',
        originPlace: '挪威',
        collectionDate: '2024-06-15',
        stockQuantity: 60,
        productCategory: '保健食品'
      },
      {
        pictureUrl: 'src/assets/image/login.png',
        productName: '青花瓷茶具',
        productLevel: '特等级',
        originPlace: '景德镇',
        collectionDate: '2024-05-30',
        stockQuantity: 40,
        productCategory: '茶艺类'
      },
      {
        pictureUrl: 'src/assets/image/login.png',
        productName: '手工刺绣手帕',
        productLevel: '普通级',
        originPlace: '苏州',
        collectionDate: '2024-04-18',
        stockQuantity: 70,
        productCategory: '工艺品'
      }
    ]);


    return {
      ...toRefs(state),
      submitForm,
      resetForm,
      auditList,
      submissionHistory,
      getStatusTagType,
      warehouseList
    };
  }
});
const getStatusTagType = (status) => {
  switch (status) {
    case '已通过':
      return'success';
    case '未通过':
      return 'danger';
    case '待审核':
      return 'info';
    default:
      return 'info';
  }
};
</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100%!important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px!important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px!important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px!important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}
</style>
